<template>
    <el-container id="loginBox">
        <el-container class="smallLogin">
            <el-header style="height: 85px">
                <el-row class="headerLeft" >
                    <img src="../assets/img/login/logo.png" alt="" width="44" height="38" @click="gotoHome">
                    <p @click="gotoHome">中达企业数据链</p>
                </el-row>
                <el-row class="headerRight">
                    <img src="../assets/img/login/back.png" alt="" width="30" height="19" @click="gotoHome">
                </el-row>
            </el-header>
            <el-main>
                <el-row>
                    <img src="../assets/img/login/aside.png" alt="" width="321" height="261">
                    <!--<p class="login-tips">Tips：忘记密码请联系网络管理员重置密码</p>-->
                </el-row>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
                    <el-form-item prop="username">
                        <img src="../assets/img/login/account.png" alt="" width="20" height="21">
                        <el-input v-model="ruleForm.username" placeholder="请输入手机号/邮箱" @keyup.enter.native="submitForm('ruleForm')" autofocus="true">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <img src="../assets/img/login/pwd.png" alt="" width="20" height="20">
                        <el-input type="password" placeholder="请输入登录密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
                        </el-input>
                        <span></span>
                    </el-form-item>
                    <div class="login-btn">
                        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    </div>
                    <div class="login-bottom">
                        <p class="forgetPwd" @click="forgetPwd">忘记密码</p>
                        <p>还没有账号，<span @click="gotoRegister" class="gotoRegister">我要去注册</span></p>
                    </div>
                </el-form>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
  import {mapState, mapMutations} from 'vuex'
  export default {
    data: function(){
      return {
        href:"",
        loginVisible: false,
        ruleForm: {
          username: sessionStorage.getItem("userMail") ==null ? '' :sessionStorage.getItem("userMail"),   // username: 'root' '123@qq.com'
          password: '', //123456
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
      }
    },
    mounted(){
      this.href = window.location.href.split("/index.html")[0];
      if (localStorage.getItem('businessDataLinkLogout') == 0) {
        document.cookie = "businessDataLinkUserInfo=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
        localStorage.removeItem("authToken");
      }
    },
    methods: {
      ...mapMutations(['getUserDirId', 'fileInfo']),
      gotoRegister(){
        this.$router.push('/register')
      },
      gotoHome(){
        window.location.href=this.href;
      },
      forgetPwd(){
        this.$router.push("/forgetPwd")
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // this.loginVisible = true
            let para = {userEmail: this.ruleForm.username, password: this.ruleForm.password}
            this.$http.post('/user/login', para).then(res => {
              console.log('login：：', res)
              if (res.status !== 200) {
                this.$message({
                  message: res.msg,
                  type: 'error'
                })
              } else {
                localStorage.setItem('companyName',res.data.companyName);
                localStorage.setItem('companyId',res.data.companyId);
                localStorage.setItem('realName', res.data.realName);
                localStorage.setItem('loginImg',res.data.headImg);
                document.cookie="businessDataLinkUserInfo="+JSON.stringify({
                    isLogin: true, imgURL: res.data.headImg, userEmail: res.data.userEmail
                  });
                localStorage.setItem('businessDataLinkUserInfo', JSON.stringify({
                  isLogin: true, imgURL: res.data.headImg, userEmail: res.data.userEmail
                }))
                localStorage.setItem("userInfo",JSON.stringify({userEmail:res.data.userEmail,realName:res.data.realName,companyId:res.data.companyId}));
                localStorage.setItem('authToken', res.authToken)
                localStorage.setItem('dirId', res.data.dirId) //判断角色 （废弃）
                localStorage.setItem('isAdministrators', res.data.isAdministrators) //判断角色
                this.$store.commit("fileInfo", {fileName: '我的文档', fileId: res.data.dirId,})
                this.$store.commit("getUserDirId", res.data.dirId)
                this.$router.push({path: '/'})
                this.$message({
                  message: '登录成功',
                  type: 'success',
                  duration:1000
                })
              }
            },err=> {
              this.$message({
                message: '登录失败...',
                type: 'error'
              })
              console.log(err)
            })
          }
        });
      }
    }
  }
</script>

<style lang="scss">
    #loginBox{
        .login-btn .el-button{
            span{
                font-size: 18px;
            }
        }
        .el-form-item__content{
            display: flex;
            align-items: center;
            overflow: hidden;
            padding-bottom:1px;
            border-bottom:1px solid #ccc!important;
        }
        .el-input__inner,el-input__inner,el-form-item.is-success{
            border: 0 !important;
            border-radius: 0!important;
            background: white!important;
            height: 60px;
            line-height: 60px;
        }
    }
</style>
<style scoped lang="scss">
#loginBox{
    height: 100%;
    background: url("../assets/img/login/bk.jpg") no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .smallLogin{
        background: white;
        max-width: 780px;
        height: 423px;
        .el-header{
            display: flex;
            justify-content: space-between;
            line-height: 40px;
            padding:26px 20px 26px 40px;
            .headerLeft{
                cursor:pointer;
                display: flex;
                img{
                    margin-right: 11px;
                }
                p{
                    font-size:18px;
                    font-family:SourceHanSansCN-Medium;
                    font-weight:500;
                    color:rgba(43,43,43,1);
                }
            }
            .headerRight{
                img:hover{
                    opacity: .9;
                }
            }
        }
        .el-main{
            padding:0 40px;
            justify-content: space-between;
            display: flex;
            margin-top:31px;
            .login-tips{
                font-size:14px;
                font-family:SourceHanSansCN-Medium;
                font-weight:500;
                color:rgba(204,204,204,1);
            }
            .login-btn .el-button{
                margin-top:41px;
                width: 320px;
                border-radius:27px;
                background:rgba(84,157,232,1);
                height: 54px;
            }
            .el-form{
                overflow: hidden;
                p{
                    margin-top: 40px;
                    float: right;
                    font-size:14px;
                    font-family:SourceHanSansCN-Medium;
                    font-weight:500;
                    color:rgba(102,102,102,1);
                    span{
                        color:#549DE8;
                    }
                    span:hover{
                        opacity: .9;
                    }
                }
            }
            .el-form-item{
                margin: 0;
                img{
                    margin-left: 10px;
                    margin-right: 5px;
                }
            }
            .login-btn .el-button:hover{
                background:rgba(84,157,232,.9)!important;
            }
            .login-bottom{
                display: flex;
                justify-content: space-between;
                .forgetPwd{
                    cursor: pointer;
                }
                .forgetPwd:hover{
                    color:#549DE8;
                }
            }
        }
        .gotoRegister{
            cursor: pointer;
        }
    }
}
</style>
